<template>
  <span :class="color">{{index+1}}: {{inp==null?'未完成':result?'正确':'错误'}}</span>
</template>

<script>
export default {
    props: ['result', 'inp', 'index'],
    computed: {
    color() {
      if (this.inp === null) {
        return 'undo';
      } else if (this.result) {
        return 'right'; 
      } else {
        return 'error'; 
      }
    }
  }
};
</script>

<style scoped>
.right {
  color: green;
}
.error {
  color: red;
}
.undo {
  color: #ccc;
}
</style>